<template>
  <div class="left-right-container">
    <header>
      <h3 @click="goHome">&lt;</h3>
      <h3 class="title">mallMenu-商城分类</h3>
    </header>
    <!-- 搜索区域 -->
    <nav>
      <label>
        <i class="iconfont icon-search"></i>
        <input
          type="text"
          v-model="searchValue"
          placeholder="搜索uView"
          @keyup.enter="searchContent"
        />
      </label>
    </nav>
    <main>
      <!-- 左侧导航栏区域 -->
      <aside>
        <ul>
          <li
            v-for="leftObj in leftData"
            :class="{ active: leftIndex == leftObj.id }"
            @click="changeNav(leftObj.id)"
            :key="leftObj.id"
          >
            {{ leftObj.name }}
          </li>
        </ul>
      </aside>
      <!-- 右侧内容区域 -->
      <section>
        <div class="content-wrap">
          <div class="title">{{ rightObj.name }}</div>
          <div class="cloth-container">
            <div
              class="img-wrap"
              v-for="rcObj in rightObj.children"
              :key="rcObj.cid"
              @click="goDetail(rcObj.cid)"
            >
              <div class="img">
                <img :src="rcObj.img" alt="" />
              </div>
              <p>{{ rcObj.name }}</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
import { leftData, rightData } from "./data/index.js";
export default {
  name: "leftRight",
  data() {
    return {
      searchValue: "",
      leftData: [],
      // 左侧选中标签
      leftIndex: "1",
      // 右侧数据
      rightObj: {},
    };
  },
  created() {
    this.leftData = leftData;
    this.rightData = rightData;
    // console.log(rightData);
    this.loadRightData();
  },
  methods: {
    goHome() {
      this.$router.push("/");
    },
    searchContent() {
      this.$router.push(`/result?q=${this.searchValue}`);
    },
    loadRightData() {
      // console.log(this.leftIndex);
      const rightArr = rightData.filter((rightObj) => {
        if (this.leftIndex == rightObj.id) {
          return rightObj;
        }
      });
      this.rightObj = rightArr[0];
      // console.log(rightArr[0]);
    },
    // 详情页
    goDetail(id) {
      this.$router.push(`/detail?q=${id}`);
    },
    // 切换导航
    changeNav(id) {
      this.leftIndex = id;
      this.loadRightData();
      // console.log(this.leftIndex);
    },
  },
};
</script>

<style lang="less" scoped>
.left-right-container {
  header {
    width: 100%;
    height: 50px;
    display: flex;
    .title {
      text-align: center;
      width: 99%;
    }
  }
  nav {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    label {
      line-height: 20px;
      padding: 5px;
      height: 20px;
      display: flex;
      border-radius: 20px;
      background-color: #eaeaea;
      input {
        width: 100%;
        border: none;
        background-color: #eaeaea;
        outline: none;
      }
      inpt:focus {
        outline: none;
      }
    }
  }
  main {
    display: flex;
    width: 100%;
    background-color: #fafafa;
    aside {
      width: 30%;
      text-align: left;
      ul {
        list-style-type: none;
        padding: 0;
        text-align: center;
        li {
          line-height: 40px;
          height: 40px;
          background-color: #f6f6f6;
          color: #9b9b9b;
        }
        .active {
          background-color: #ffffff;
          color: #25082b;
        }
      }
    }
    section {
      padding: 20px;
      text-align: right;
      width: 65%;
      background-color: #ffffff;
      padding: 20px;
      box-sizing: border-box;
      .content-wrap {
        .title {
          text-align: left;
          color: #737375;
          padding-bottom: 10px;
        }
        .cloth-container {
          display: grid;
          grid-template-columns: repeat(3, 30%);
          gap: 20px;
          text-align: center;
          .img-wrap {
            padding: 10px;
            display: flex;
            flex-direction: column;
            width: 70px;
            height: 100px;
            text-align: center;
            .img {
              width: 60px;
              height: 60px;
              line-height: 60px;
              border-radius: 50%;
              background-color: #f6f6f6;
              img {
                width: 40px;
                height: 40px;
                padding: 10px 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
